import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Row, Col, Tabs } from 'antd';
import { connect } from 'umi';
import MyDataTable from '@/components/MyDataTable';
import G2LineBar from '@/pages/Charts/G2LineBar';
import G2LineBin from '@/pages/Charts/G2LineBin';

const { TabPane } = Tabs;
class ViewPage extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            dataSource: [],
            defTab: '1',
        }
    }
    tabSwitch = (key: any) => {
        this.setState({ defTab: key });
    }
    doubleClick = (record: any) => {
        console.log(record);
    }
    fetchDatas = () => { }
    render() {
        const { defTab } = this.state
        const columnPb = [
            {
                title: '物料编码',
                dataIndex: 'partNum',
            },
            {
                title: '仓库',
                dataIndex: 'warehouseCode',
            },
            {
                title: '库位',
                dataIndex: 'binNum',
            },
            {
                title: '库存量',
                dataIndex: 'onhandQty',
            },
            {
                title: '批次号',
                dataIndex: 'lotNum',
            },
        ];
        const columnSo = [
            {
                title: '订单号',
                dataIndex: 'orderNum',
            },
            {
                title: '物料编码',
                dataIndex: 'partNum',
            },
            {
                title: '描述',
                dataIndex: 'lineDesc',
            },

            {
                title: '需求数',
                dataIndex: 'orderQty',
            },
            {
                title: '单位',
                dataIndex: 'ium',
            },
        ];
        const columnPo = [
            {
                title: '采购单号',
                dataIndex: 'poNum',
            },
            {
                title: '物料编码',
                dataIndex: 'partNum',
            },
            {
                title: '描述',
                dataIndex: 'lineDesc',
            },
            {
                title: '采购数',
                dataIndex: 'orderQty',
            },
            {
                title: '单位',
                dataIndex: 'ium',
            },
        ];
        const columnJob = [
            {
                title: '工单号',
                render: (record: any) => (record.jobNum + '-' + record.assemblySeq + '-' + record.mtlSeq)
            },
            {
                title: '物料编码',
                dataIndex: 'partNum',
            },
            {
                title: '描述',
                dataIndex: 'partDescription',
            },
            {
                title: '需求数',
                dataIndex: 'requiredQty',
            },
            {
                title: '单位',
                dataIndex: 'ium',
            },
        ];
        const columnInsp = [
            {
                title: '编号',
                dataIndex: 'inspNum',
            },
            {
                title: '物料编码',
                dataIndex: 'partNum',
            },
            {
                title: '描述',
                dataIndex: 'partDescription',
            },
            {
                title: '待检数',
                dataIndex: 'inspQty',
            },
            {
                title: '单位',
                dataIndex: 'ium',
            },
        ];
        const columnConf = [
            {
                title: '编号',
                dataIndex: 'conNum',
            },
            {
                title: '物料编码',
                dataIndex: 'partNum',
            },
            {
                title: '描述',
                dataIndex: 'partDescription',
            },
            {
                title: '不合格数',
                dataIndex: 'conQty',
            },
            {
                title: '单位',
                dataIndex: 'ium',
            },
        ];
        return (
            <PageHeaderWrapper title={false}>
                <Row gutter={[16, 16]}>
                    <Col span={12}>
                        <Card title="需求">
                            <Tabs defaultActiveKey="1">
                                <TabPane tab="销售" key="1">
                                    <MyDataTable act="GetAll" columns={columnSo} pageSize={10} control="OrderDtl" doubleClick={this.doubleClick} size="small" />
                                </TabPane>
                                <TabPane tab="工单" key="2">
                                    <MyDataTable act="GetAll" columns={columnJob} pageSize={10} control="JobMtl" doubleClick={this.doubleClick} size="small" />
                                </TabPane>
                            </Tabs>
                            <G2LineBar />
                        </Card>
                    </Col>
                    <Col span={12}>
                        <Card title="供应">
                            <Tabs defaultActiveKey={defTab} activeKey={defTab} onChange={this.tabSwitch}>
                                <TabPane tab="库存" key="1">
                                    <MyDataTable act="GetAll" columns={columnPb} pageSize={10} control="PartBin" doubleClick={this.doubleClick} size="small" />                                    
                                </TabPane>
                                <TabPane tab="采购" key="2">
                                    <MyDataTable act="GetAll" columns={columnPo} pageSize={10} control="PODetail" doubleClick={this.doubleClick} size="small" />
                                </TabPane>
                                <TabPane tab="检验" key="3">
                                    <MyDataTable act="GetAll" columns={columnInsp} pageSize={10} control="InspDtl" doubleClick={this.doubleClick} size="small" />
                                </TabPane>
                                <TabPane tab="不合格" key="4">
                                    <MyDataTable act="GetList" columns={columnConf} pageSize={10} control="NonConfDtl" doubleClick={this.doubleClick} size="small" />
                                </TabPane>
                            </Tabs>
                            <G2LineBin />
                            
                        </Card>
                    </Col>
                </Row>

            </PageHeaderWrapper>
        )
    }
}
export default connect(({ Abp }: API.IConnectState) => ({
    response: Abp.response,
    currentUser: Abp.currentUser,
}))(ViewPage);